<script lang="ts" setup>
import AsideMenu from "./AsideMenu.vue";
import { filterMenus } from "@/grants/menu";
import { getCurrRoutes } from "@/grants/routes";
import { useGrantsStore } from "@/stores/grantsStore";
import { storeToRefs } from "pinia";
import MyBreadcrumb from "@/components/MyBreadcrumb.vue";

const { isDoGrants } = storeToRefs(useGrantsStore());

// 处理当前用户的菜单和路由配置
const currMenus = filterMenus();

// isDoGrants.value || getCurrRoutes();//动态添加当前用户的路由配置。
if (!isDoGrants.value) {
    console.log("index.vue里调用了getCurrRoutes()");
    getCurrRoutes();
}
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside>
                <AsideMenu :menus="currMenus"></AsideMenu>
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-container>
                    <el-header style="height: 50px; background-color: #ededed">
                        <MyBreadcrumb></MyBreadcrumb>
                    </el-header>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.common-layout {
    width: 100%;
    height: 100%;

    .el-container {
        width: 100%;
        height: 100%;
        display: flex;

        .el-aside {
            width: 200px;
            height: 100%;
            background-color: #ededed;
        }

        .el-container {
            flex: 1;
            height: 100%;

            .el-header {
                width: 100%;
                height: 100px;
                background-color: skyblue;
            }

            .el-main {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
